<template>
	<view class="registration-form-page">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title" style="text-align: center;">肃州区农村劳动力调查表</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>1.姓名</view>
				<view class="form-content">
					<view class="form-content">
						<input type="text" placeholder="请输入姓名" v-model="form.name" placeholder-class="inputPlaceholder"
							class="form-ctrl" maxlength="20" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>2.性别</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="sex" range-key="value" :value="sexIndex"
						@change="bindPicker($event,'sex')">
						{{form.sex==0 ? "请选择性别" : form.sex}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>3.身份证号码</view>
				<view class="form-content">
					<input v-model="form.idcard" maxlength="18" type="text" placeholder="请输入身份证号码"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>4.家庭住址</view>
				<view class="form-content">
					<MultipleColPicker class="form-ctrl" :range="township" :value="form.homeAddress"
						@selected="bindTownship"></MultipleColPicker>
					<view class="iconfont icon-gengduo arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>5.联系电话</view>
				<view class="form-content">
					<input v-model="form.mobile" maxlength="11" type="number" placeholder="请填写联系电话"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>

			<view class="form-item">
				<view class="form-label"><text class="require">*</text>8.学历</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="educationId" range-key="value" :value="educationIdIndex"
						@change="bindPicker($event,'educationId')">
						{{form.educationId == 0 ? "请选择" : form.educationId}}</picker>
					<view class="iconfont icon-gengduo arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>9.是否在校学生</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="isStudent" range-key="value" :value="isStudentIndex"
						@change="bindPicker($event,'isStudent')">
						{{form.isStudent==0 ? "请选择" : form.isStudent}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>务工意愿</view>
				<view class="form-content">
					<input v-model="form.wishIndustry" maxlength="255" type="text" placeholder="请输入您的务工意愿"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>27.培训意愿</view>
				<view class="form-content">
					<input v-model="form.trainWish" maxlength="255" type="text" placeholder="请输入您想培训意愿"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
		</view>
		<view class="btn-item">
			<view class="btn1" @click="submit(2)">提交</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getSalaryData
	} from '@/util/util.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		insertTrainInvestigateApi,
		getTrainInvestigateDetailApi
	} from '@/api/registration.js'
	import {
		getIndustryListApi,
		getQuestionnaireConfig,
		getAreaListApi
	} from '@/api/registration.js'
	import MultipleColPicker from '@/page_other/components/Picker/MultipleColPicker1'
	import MultipleColPickerArea from '@/page_other/components/Picker/MultipleColPickerArea'
	export default {
		components: {
			MultipleColPicker,MultipleColPickerArea
		},
		data() {
			return {
				form: {
					id:0,
					name: '',
					sex: '',
					idcard: '',
					mobile: '',
					homeAddress: [],
					educationId: 0,
					wishIndustry: '',
					trainWish: '',
					isStudent: 0,
				},
				rules: {
					name: {
						name: '姓名',
						required: true,
					},
					idcard: {
						name: '身份证号码',
						required: true
					},
					sex: {
						name: '性别',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择性别')
							}
							callback();
						}
					},
					mobile: {
						required: true,
						name: '联系电话',
					},
					homeAddress: {
						required: true,
						name: '家庭住址',
					},
					educationId: {
						required: true,
						name: '学历',
					},
					isStudent: {
						required: true,
						name: '是否在校学生',
					},
					wishIndustry: {
						required: true,
						name: '务工意愿',
					},
					trainWish: {
						required: true,
						name: '培训意愿',
					},

				},
				sex: [{
					id: 1,
					value: '男'
				}, {
					id: 2,
					value: '女'
				}],
				sexIndex: 0,
				isStudent: [{
					id: 1,
					value: '是'
				}, {
					id: 2,
					value: '否'
				}],
				isStudentIndex: 0,
				educationId: [{
						id: 1,
						value: '小学'
					},
					{
						id: 2,
						value: '初中'
					},
					{
						id: 3,
						value: '高中（职高）'
					},
					{
						id: 4,
						value: '大专'
					},
					{
						id: 5,
						value: '本科'
					},
					{
						id: 6,
						value: '研究生及以上'
					}
				],
				educationIdIndex: 0,
				wishIndustry: [],
				township: [],
			}
		},
		methods: {
			
			bindTownship(township) {
				this.form.homeAddress = township
			},

			bindPicker(e, key, rangeKey = '') {

				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].value);
			},
			bindPicker1(e, key, rangeKey = '') {
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].data);
			},
			submit(e) {

				let rules = JSON.parse(JSON.stringify(this.rules));
				let form = JSON.parse(JSON.stringify(this.form))
				rules.mobile.validator = function(value, form, callback) {
					if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
						callback('请输入正确的手机号码');
					}
					callback()
				}
				form.homeAddress = form.homeAddress.join(',');
				if (validate(form, rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					insertTrainInvestigateApi(form).then(() => {
						this.showToast('提交成功,感谢您的参与', () => {
							uni.reLaunch({
								url: '/pages/home/index'
							})
						})
					})
				}
			},
			getDetail() {
				getTrainInvestigateDetailApi({id:this.form.id}).then((res) => {
					this.form = res ?? []
					if(this.form.monthlyIncome)
					{
						this.form.monthlyIncome = parseInt(this.form.monthlyIncome)
					}
					if(this.form.homeAddress)
					{
						this.form.homeAddress = this.form.homeAddress.split(",");
					}
				})
				
			},
			getAreaList()
			{
				getAreaListApi().then((res) => {
					
					this.wanderAboutType = res ?? []
					this.wanderAboutType2023 = res ?? []
				})
			},
			async getList() {
				uni.showLoading({
					title: '加载中'
				})
				getQuestionnaireConfig({
					type: 2
				}).then((res) => {
					let list = res ?? [];
					list.forEach((item) => {
						item.child.forEach(item1 => {
							item1.child.forEach(item2 => {
								let child = [{
										id: 1,
										name: '1号'
									}, {
										id: 2,
										name: '2号'
									}, {
										id: 3,
										name: '3号'
									}, {
										id: 4,
										name: '4号'
									}, {
										id: 5,
										name: '5号'
									}, {
										id: 6,
										name: '6号'
									}, {
										id: 7,
										name: '7号'
									}, {
										id: 8,
										name: '8号'
									}, {
										id: 9,
										name: '9号'
									}, {
										id: 10,
										name: '10号'
									},
									{
										id: 11,
										name: '11号'
									}, {
										id: 12,
										name: '12号'
									}, {
										id: 13,
										name: '13号'
									}, {
										id: 14,
										name: '14号'
									}, {
										id: 15,
										name: '15号'
									}, {
										id: 6,
										name: '16号'
									}, {
										id: 7,
										name: '17号'
									}, {
										id: 18,
										name: '18号'
									}, {
										id: 19,
										name: '29号'
									}, {
										id: 20,
										name: '20号'
									},
									{
										id: 21,
										name: '21号'
									}, {
										id: 22,
										name: '22号'
									}, {
										id: 23,
										name: '23号'
									}, {
										id: 24,
										name: '24号'
									}, {
										id: 25,
										name: '25号'
									}, {
										id: 6,
										name: '26号'
									}, {
										id: 7,
										name: '27号'
									}, {
										id: 28,
										name: '28号'
									}, {
										id: 29,
										name: '29号'
									}, {
										id: 30,
										name: '30号'
									},
									{
										id: 31,
										name: '31号'
									}, {
										id: 32,
										name: '32号'
									}, {
										id: 33,
										name: '33号'
									}, {
										id: 34,
										name: '34号'
									}, {
										id: 35,
										name: '35号'
									}, {
										id: 6,
										name: '36号'
									}, {
										id: 7,
										name: '37号'
									}, {
										id: 38,
										name: '38号'
									}, {
										id: 39,
										name: '39号'
									}, {
										id: 40,
										name: '40号'
									},
									{
										id: 41,
										name: '41号'
									}, {
										id: 42,
										name: '42号'
									}, {
										id: 43,
										name: '43号'
									}, {
										id: 44,
										name: '44号'
									}, {
										id: 45,
										name: '45号'
									}, {
										id: 6,
										name: '46号'
									}, {
										id: 7,
										name: '47号'
									}, {
										id: 48,
										name: '48号'
									}, {
										id: 49,
										name: '49号'
									}, {
										id: 50,
										name: '50号'
									}
								]
								item2.child = child;
							})
						})
					})
					this.township = list ?? [];
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			if(e.id)
			{
				this.form.id = e.id
				this.getDetail()
			}
			this.getAreaList()
			this.getList()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F6F9;
	}

	.registration-form-page {
		width: 100%;
		padding: 30rpx 30rpx 150rpx 30rpx;

		.btn-item {
			display: flex;
			justify-content: space-between;
			position: fixed;
			transform: translate(-50%, -50%);
			left: 50%;
			bottom: 0rpx;
			z-index: 999999;

			.btn {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #0256FF;
				border: 1px solid #0256FF;
				background-color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				width: 180rpx;
				margin-right: 30rpx;
			}

			.btn1 {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #0256FF;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				width: 340rpx;
			}
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			box-shadow: 0 0 10px 0 #efefef;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 26rpx;
				color: #999;
			}

			.form-item:last-child {
				border-bottom: none;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					font-weight: bold;

					.require {
						color: #1257FF;
					}
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 120rpx;
						margin-right: 20rpx;
					}

					.form1 {
						flex-direction: row;
						align-items: center;
						width: 100%;
						margin-right: 20rpx;
					}


					.form-ctrl {

						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
						color: #242424;
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.form-ctrl1 {
						height: 80rpx;
						line-height: 80rpx;
						flex-grow: 1;
						color: #242424;
						font-size: 24rpx;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}

					.text {
						flex-grow: 0;
						color: #242424;
						font-size: 26rpx;
						width: 70rpx;
					}
				}
			}
		}
	}
</style>
